<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
            <blog-post>
                <h1 slot="header">
                    About Me
                </h1>
                <p>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.</p>
                <p slot="footer">
                    Copyright 2016 Evan You
                </p>
                <p>If I have some content down here, it will also be included in vm.$slots.default.</p>.
            </blog-post>
            <anchored-heading :level="1">
                <div>sssssssssssss</div>
            </anchored-heading>
    </div>
</body>
<script>
    var getChildrenTextContent = function (children) {
        return children.map(function (node) {
            return node.children
            ? getChildrenTextContent(node.children)
            : node.text
        }).join('')
    }

    Vue.component('blog-post', {
        render: function (createElement) {
            var header = this.$slots.header
            var body   = this.$slots.default
            var footer = this.$slots.footer
            return createElement('div', [
            createElement('header', header),
            createElement('main', body),
            createElement('footer', footer)
            ])
        }
    })

    Vue.component('anchored-heading', {
        render: function (createElement) {
            // create kebabCase id
            var headingId = getChildrenTextContent(this.$slots.default)
            .toLowerCase()
            .replace(/\W+/g, '-')
            .replace(/(^\-|\-$)/g, '')
            return createElement(
            'h' + this.level,
            [
                createElement('a', {
                attrs: {
                    name: headingId,
                    href: '#' + headingId
                }
                }, this.$slots.default)
            ]
            )
        },
        props: {
            level: {
                type: Number,
                required: true
            }
        }
    })
    new Vue({
        el: '#app',
        data: {
            level: '1'
        }
    })
</script>
</html>